<template>
    <Header msg="头部分" @refreshParent="refreshParent" class="fixed-header"></Header>
    <div ref="targetDiv" class="ycnz">
        <div class="zjneiron pydesc" style="">
            <div>
                <div class="middle-2 ">
                    <el-row :gutter="24" class="container">
                        <!-- 单个功能项的模板 -->
                        <div class="btitem">
                            <a href="#" @click.prevent="handleClick('qushuiyin')"
                                class="btclickable-col purple-gradient">
                                <el-row>
                                    <el-col :span="6"><img src="../images/Tbox/qushuiyin.png" width="80%" height="80%"
                                            class="imgmove"></el-col>
                                    <el-col :span="18" class="margin_top6 font-color-white">去水印</el-col>
                                </el-row>
                            </a>
                        </div>
                        <div class="btitem">
                            <a href="#" @click.prevent="handleClick('wenantiqu')"
                                class="btclickable-col purple-gradient">
                                <el-row>
                                    <el-col :span="6"><img src="../images/Tbox/wenantiqu.png" width="80%" height="80%"
                                            class="imgmove"></el-col>
                                    <el-col :span="18" class="margin_top6 font-color-white">文案提取</el-col>
                                </el-row>
                            </a>
                        </div>
                        <div class="btitem">
                            <a href="#" @click.prevent="handleClick('zidongduizhou')"
                                class="btclickable-col purple-gradient">
                                <el-row>
                                    <el-col :span="6"><img src="../images/Tbox/zidongduizhou.png" width="80%"
                                            height="80%" class="imgmove "></el-col>
                                    <el-col :span="18" class="margin_top6 font-color-white">自动对轴</el-col>
                                </el-row>
                            </a>
                        </div>

                        <!-- <div class="btitem">
                            <a href="#" @click.prevent="handleClick('bianyin')" class="btclickable-col purple-gradient">
                                <el-row>
                                    <el-col :span="6"><img src="../images/Tbox/bianyin.png" width="80%" height="80%"
                                            class="imgmove"></el-col>
                                    <el-col :span="18" class="margin_top6">音效变声</el-col>
                                </el-row>
                            </a>
                        </div>
                        <div class="btitem">
                            <a href="#" @click.prevent="handleClick('renshengfenli')"
                                class="btclickable-col purple-gradient">
                                <el-row>
                                    <el-col :span="6"><img src="../images/Tbox/renshengfenli.png" width="80%"
                                            height="80%" class="imgmove"></el-col>
                                    <el-col :span="18" class="margin_top6">人声分离</el-col>
                                </el-row>
                            </a>
                        </div>-->
                    </el-row>
                </div>
                <div>

                    <!-- 单个功能项的模板 -->
                    <div v-if="currentComponent === 'qushuiyin'" class="content">
                        <Qushuiyin msg="去水印"></Qushuiyin>
                    </div>

                    <!-- 单个功能项的模板 -->
                    <div v-if="currentComponent === 'wenantiqu'" class="content">
                        <Wenantiqu msg="文案提取"></Wenantiqu>
                    </div>

                    <!-- 单个功能项的模板 -->
                    <div v-if="currentComponent === 'zidongduizhou'" class="content">
                        <Zidongduizhou msg="自动对轴"></Zidongduizhou>
                    </div>

                    <!-- 单个功能项的模板 -->
                    <div v-if="currentComponent === 'danfengmian'" class="content">
                        <Danfengmian msg="单封面"></Danfengmian>
                    </div>

                    <!-- 单个功能项的模板 -->
                    <div v-if="currentComponent === 'sanlianfengmian'" class="content">
                        <Sanlianfengmian msg="三联封面"></Sanlianfengmian>
                    </div>

                    <!-- 单个功能项的模板 -->
                    <!--   <div v-if="currentComponent === 'bianyin'" class="content">
                        <Bianyin msg="音效变生"></Bianyin>
                    </div>-->

                    <!-- 单个功能项的模板 -->
                    <!-- <div v-if="currentComponent === 'renshengfenli'" class="content">
                        <Renshengfenli msg="人声分离"></Renshengfenli>
                    </div>-->


                </div>
            </div>
        </div>

    </div>
    <Up_module msg="回到顶部"></Up_module>
</template>


<script>
import { ref, computed, onMounted } from 'vue';
import { Moon, Sunny, Headset, Download, VideoCameraFilled, Document, Upload, VideoPlay } from '@element-plus/icons-vue';
import Footer from '../components/footer.vue';
import Header from '../components/header.vue';
import Danfengmian from '../Tinkerbox/Danfengmian_module.vue';
import Qushuiyin from '../Tinkerbox/Qushuiyin_module.vue';
import Zidongduizhou from '../Tinkerbox/Zidongduizhou_module.vue';
import Sanlianfengmian from '../Tinkerbox/Sanlianfengmian_module.vue';
import Wenantiqu from '../Tinkerbox/Wenantiqu_module.vue';
import Bianyin from '../Tinkerbox/Bianyin_module.vue';
import Renshengfenli from '../Tinkerbox/Renshengfenli_module.vue';
import { useRoute } from 'vue-router';
import Up_module from '../components/up_module.vue';
import "../components/css/Homepage.css";



export default {
    components: {
        Footer,
        Header,
        Danfengmian,
        Qushuiyin,
        Zidongduizhou,
        Sanlianfengmian,
        Wenantiqu,
        Bianyin,
        Renshengfenli,
        Up_module
    },
    methods: {


    },
    setup() {
        const isDarkMode = ref(false);
        const targetDiv = ref(null);
        const textarea = ref('');
        const route = useRoute();
        const argument = computed(() => route.params.argument);
        const currentComponent = ref(''); // 默认显示 Header
        /// 获取cookie
        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        };

        // 初始化时设置默认主题
        onMounted(() => {

            handleClick(argument.value);
            const user = getCookie('nightMode');
            if (user == "") {
                targetDiv.value.className = "light"; // 设置为默认主题
            } else {
                targetDiv.value.className = user; // 根据 cookie 设置主题
            }



        });
        function refreshParent() {

            const user = getCookie('nightMode');
            isDarkMode.value = user === 'dark';
        }

        const handleClick = (value) => {

            currentComponent.value = value;
        };

        return {
            isDarkMode,
            Headset,
            Danfengmian,
            Qushuiyin,
            Zidongduizhou,
            Sanlianfengmian,
            Wenantiqu,
            Bianyin,
            Renshengfenli,
            Document,
            Download,
            VideoCameraFilled,
            Moon,
            Sunny,
            targetDiv,
            textarea,
            VideoPlay,
            argument,
            currentComponent,
            handleClick,
            refreshParent
        };
    },
};
</script>

<style scoped>
.pydesc {
    width: 80%;
    /* 设置宽度为80% */
    margin-left: 10%;
    /* 左边距为10% */
    padding-top: 10px;
    /* 上内边距为10px */
    height: 1000px;
    /* 高度为1000px */
}

/* 主页头部 */
.btclickable-col {
    display: inline-block;
    /* 内联块级元素 */
    padding: 5px;
    /* 内边距 */
    margin-top: 0px;
    /* 上外边距 */
    border-radius: 4px;
    /* 圆角 */
    text-decoration: none;
    /* 去掉链接的下划线 */
    color: inherit;
    /* 继承父元素的颜色 */
    background-color: rgba(151, 113, 113, 0.1);
    /* 轻微的背景色 */
    transition: background-color 0.3s ease;
    /* 平滑过渡背景色变化 */
}

.btclickable-col:hover {
    background-color: rgba(151, 113, 113, 0.3);
    /* 鼠标悬停时加深背景色 */
}

.btitem {
    border-radius: 5px;
    /* 圆角 */
    padding: 0px;
    /* 内边距 */
    width: 120px;
    /* 宽度 */
    box-sizing: border-box;
    /* 盒模型 */
    text-align: center;
    /* 文本居中 */
}

.container {
    display: flex;
    /* 弹性布局 */
    flex-wrap: wrap;
    /* 允许项目在必要时换行 */
    gap: 20px;
    /* 项目之间的间距 */
    padding: 10px 30px;
    /* 内边距 */
}

.text_align {
    text-align: center;
    /* 文本居中 */
}

.imgmove {
    padding: 10%;
    /* 图片内边距 */
}
</style>